<template>
  <view class="container">
    <view :style="{height: topBar.height+'px'}">
      <view :style="{paddingTop: topBar.statusBarHeight+'px'}" class="navbar">
        <view class="nav-bar1" :style="{height: topBar.navbarHeight+'px'}">
          <image src="../../static/black_back.png" mode="widthFix" class="back" @click="toBack"></image>
        </view>
      </view>
    </view>
    <view class="title">
      <view class="label">邀请好友免费得会员</view>
      <view class="tips">（请看下面详细步骤）</view>
    </view>
    <view class="body">
      <view class="flex-row" style="position: relative">
        <view class="item">
          <image src="http://down.qwdata.vip/app/mianfei_vip/1%403x.png" class="icon"></image>
          <view>邀请好友</view>
        </view>
        <image src="http://down.qwdata.vip/app_icon/1672909361759" class="arrow" style="left: 27%"></image>
        <view class="item">
          <image src="http://down.qwdata.vip/app/mianfei_vip/2%403x.png" class="icon"></image>
          <view>成功注册</view>
        </view>
        <image src="http://down.qwdata.vip/app_icon/1672909361759" class="arrow" style="left: 60%"></image>
        <view class="item">
          <image src="http://down.qwdata.vip/app/mianfei_vip/3%403x.png" class="icon"></image>
          <view style="white-space: nowrap;">双方各获1个月会员</view>
        </view>
      </view>

      <view class="wx-btn" @click="select('weixin')">
        <image class="icon" src="http://down.qwdata.vip/app/mianfei_vip/weixin%403x.png"></image>
        邀请微信好友
      </view>

      <view class="share">
        <view class="share-btn" @click="select('weixin_circle')">
          <image class="icon" src="http://down.qwdata.vip/app/mianfei_vip/pengyouquan@3x.png"></image>
          分享朋友圈
        </view>
        <view class="share-btn" @click="select('copy')">
          <image class="icon" src="http://down.qwdata.vip/app/mianfei_vip/lianjie_@3x.png"></image>
          复制链接
        </view>
      </view>

    </view>

    <view class="yaoqinglist">
      <view class="header">
        <view class="item">被邀人</view>
        <view class="item">注册时间</view>
        <view class="item">奖励记录</view>
      </view>

      <view class="invitation-body">
        <view class="empty-text" v-if="rewards.length === 0">暂未邀请好友</view>
        <template v-else>
          <view v-for="row in rewards" :key="row.id" class="row">
            <view class="item">{{ row.invitedUser.name }}</view>
            <view class="item">{{ row.rewardTimeAt }}</view>
            <view class="item red">{{ row.reward }}</view>
          </view>
        </template>
      </view>
      <view class="list-footer">
        邀请注册1人获1个月VIP，每个用户最多获得6个月VIP
      </view>
    </view>

    <view class="footer" @click="tryShare">
      <view class="btn">立即分享</view>
    </view>

    <Share ref="Share"></Share>
  </view>
</template>

<script>
import {mapGetters} from 'vuex';
import {commonApi} from '@/api';
import Share from '@/components/Share'
import shareUtils from "../../libs/shareUtils";

export default {
  components: {Share},
  data() {
    return {
      rewards: [],
    }
  },
  computed: {
    ...mapGetters(['mine', 'settings', 'topBar', 'isLogined'])
  },
  onLoad() {
    commonApi.inviteVips().then(res => {
      this.rewards = res.data.data.list
    })
  },
  methods: {
    toBack() {
      uni.navigateBack()
    },
    tryShare() {
      this.$refs.Share.open()
    },
    select(channel) {
      if (channel === 'copy') {
        shareUtils.copyShortLink()
      } else {
        shareUtils.share(channel)
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  background-color: #F1F3F7;

  .navbar {
    background-color: #F1F3F7;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;

    .nav-bar1 {
      display: flex;
      align-items: center;
      padding: 0 20upx;
      //background-color: #0f0;
      .back {
        width: 36upx;
        height: 36upx;
        position: absolute;
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30rpx;
    padding-top: 0;
    background-color: #F1F3F7;

    .btn {
      background-color: #1a2225;
      color: #e9e1b1;
      height: 100upx;
      border-radius: 50upx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .body {
    padding: 40upx 0;
    margin-top: 30upx;
    background-color: #fff;
    border-radius: 24upx;
    margin-left: 30upx;
    margin-right: 30upx;

    .item {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: center;
      align-items: center;

      .icon {
        width: 92upx;
        height: 92upx;
        margin-bottom: 24upx;
      }
    }

    .arrow {
      width: 84upx;
      height: 14upx;
      position: absolute;
      top: 46upx;
    }

    .wx-btn {
      background-color: #06E06E;
      color: #fff;
      height: 100upx;
      border-radius: 50upx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 40upx;
      margin-top: 52upx;

      .icon {
        width: 46upx;
        height: 37upx;
        margin-right: 10upx;
      }
    }

    .share {
      display: flex;

      .share-btn {
        flex: 1;
        color: #181d22;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100upx;
        margin-top: 40upx;

        .icon {
          width: 40upx;
          margin-right: 20upx;
          height: 40upx;
        }
      }
    }
  }

  .yaoqinglist {
    background-color: #fff;
    margin-top: 30upx;
    border-radius: 24upx;
    margin-left: 30upx;
    margin-right: 30upx;
    overflow: hidden;
    margin-bottom: 100px;

    .header {
      height: 84upx;
      background-color: #313133;
      color: #fff;
      display: flex;

      .item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .invitation-body {
      background-color: #fff;
      min-height: 410upx;

      .empty-text {
        font-size: 30upx;
        font-weight: 500;
        text-align: center;
        padding-top: 160upx;
      }

      .row {
        display: flex;
        border-bottom: 1px solid #EDEDED;

        .item {
          flex: 1;
          text-align: center;
          line-height: 95upx;
          white-space: nowrap;

          &.red {
            color: #FC323D;
          }
        }
      }
    }

    .list-footer {
      background-color: #fff;
      height: 92upx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22upx;
      color: #5e5e5e;
      border-top: 1px solid #ededed;
    }
  }


}

.title {
  display: flex;
  padding-left: 30upx;
  padding-right: 30upx;

  .label {
    font-family: PingFangSC-Medium;
    font-size: 42upx;
    font-weight: 500;
    color: #000000;
  }

  .tips {
    margin-top: 20upx;
    color: #818181;
    font-size: 26upx;
  }

  .nav-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    background-color: yellow;
  }

  .status-contents {
    height: 44px;
    box-sizing: border-box;
    padding: 20upx 30upx;
    display: flex;
    color: #fff;
    margin-top: var(--status-bar-height);
    background-color: green;


    .back {
      width: 36upx;
      height: 36upx;
      align-self: center;
    }
  }


}

</style>
